<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>团队管理</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <el-form-item>
                    <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加团队</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table :data="teamLists" border>
                <el-table-column prop="teamId" label="成员id" align="center"></el-table-column>
                <el-table-column prop="title" label="成员名称" align="center"></el-table-column>
                <el-table-column label="成员头像" align="center">
                    <template slot-scope="scope"><img class="team" :src="UPLOADURL + scope.row.avator" alt=""></template>
                </el-table-column>
                <el-table-column prop="context" label="成员介绍" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" type="primary" @click="updateDatas(scope.$index, scope.row)">修改</el-button>
                        <el-button size="small" type="danger" @click="deleteDatas(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-dialog :title="isAdd?'添加团队':'修改团队'" :visible.sync="showVideoDialog" size="tiny" @close="closeVideoDialog" class="dialog">
			    <el-form :model="teamObj" label-width="120px">
			        <el-form-item label="团队名称">
			            <el-input type="text" v-model="teamObj.title" auto-complete="off" placeholder="请输入团队名称"></el-input>
			        </el-form-item>
                    <el-form-item label="团队介绍">
                        <el-input type="textarea" v-model="teamObj.context" auto-complete="off" placeholder="请输入团队介绍"></el-input>
                    </el-form-item>
			        <el-form-item label="团队图片">
                        <el-upload class="avatar-uploader" :headers="uploadHeader" :action="BASEURL+'/upload/team'" :show-file-list="false" :on-success="handleAvatarSuccess">
                           <el-button size="small" type="primary" :loading="uploadLoading">上传图片</el-button>
                       	</el-upload>
                        <div class="avator-thumb">
                            <img v-if="avator" :src="UPLOADURL+avator" alt="" class="banner-thumb">
                        </div>
			        </el-form-item>
			    </el-form>
                
		    <div slot="footer" class="dialog-footer">
		        <el-button @click="cancelAddVideos">取 消</el-button>
		        <el-button type="primary" @click="addVideos" :loading="addLoading">确 定</el-button>
		    </div>
		</el-dialog>

        <!-- 分页 -->
        <el-row>
            <el-col class="pagination">
                <el-pagination @current-change="currentChange" :current-page="pageId" :page-size="pageSize" layout="total, prev, pager, next" :total="counts">
                </el-pagination>
            </el-col>
        </el-row>
    </el-row>
</template>
<script>
import {
    getTeamLists,
    addTeamMenber,
    updateTeamMenberById,
    deleteTeamMenberById
} from '@/api/api'
export default {
    data: function() {
        return {
        	pageId: 1,
            pageSize: 10,
            counts: 0,
            isAdd: true,
            showVideoDialog: false,
            uploadLoading: false,
            addLoading: false,
            teamLists: [],
            teamObj: {
        		teamId: null,
            	context: "",
            	title: "",
            	avator: ""
            },
            uploadHeader: {
                TOKEN: sessionStorage.getItem('jwt'),
                APPID: 1
            },
            avator: ''
        }
    },
    created: function(){
		this.pageId = parseInt(this.$route.query.page) || 1;
		this.getVideoDatas();
    },
    methods:{
    	getVideoDatas: function(){
    		getTeamLists({ params: { pageId: this.pageId, pageSize: this.pageSize }}).then(res => {
    			console.log(res)
    			this.counts = res.count;
    			this.teamLists = res.list
    		})
    	},
    	showAddDialog: function(){
    		this.isAdd = true;
            this.showVideoDialog = true;
    	},
    	closeVideoDialog: function(){
    		this.isAdd = true;
            this.showVideoDialog = false;
            this.teamObj = {
        		teamId: null,
                context: "",
                title: "",
                avator: ""
            }
            this.avator = '';
    	},
    	updateDatas: function(index, row){
            this.teamObj = {
        		teamId: row.teamId,
                context: row.context,
                title: row.title,
                avator: row.avator
            }
            this.avator = row.avator;
    		this.isAdd = false;
    		this.showVideoDialog = true;
    	},
    	deleteDatas: function(index, row){
            this.$confirm('是否删除?', '删除团队', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'danger'
            }).then(() => {
				deleteTeamMenberById(row.teamId).then(res => {
					this.getVideoDatas();
					this.$message({
						type: 'success',
						message: '删除成功'
					})
					this.showVideoDialog = false;
				})
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
    	},
    	cancelAddVideos: function(){
    		this.closeVideoDialog()
    	},
    	addVideos: function(){
    		if(this.isAdd){
    			addTeamMenber(this.teamObj).then(res => {
    				console.log(res)
    				this.getVideoDatas();
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    })
                    this.showVideoDialog = false;
    			})
    		}else{
    			updateTeamMenberById(this.teamObj).then(res=>{
    				this.getVideoDatas();
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    })
                    this.showVideoDialog = false;
    			})
    		}
    	},
        handleAvatarSuccess: function(res){
            console.log(res)
            if(res.status){
                this.$message({
                    message: '上传成功',
                    type: 'success'
                })
                this.teamObj.avator = res.data.webPath;
                this.avator = res.data.webPath;
            }else{
                this.$message({
                    message: '上传失败',
                    type: 'error'
                })
            }
        },
    	currentChange: function(val) {
            this.$router.push('?page=' + val)
            this.pageId = val;
            this.getVideoDatas()
        }
    }
}
</script>
<style scoped lang="scss">
	.lives-news {
	    .title {
	        font-size: 12px;
	        border-bottom: 1px solid #eaeaea;
	        margin-bottom: 5px;
	        h3 {
	            display: inline-block;
	            padding: 5px 0;
	            margin: 0;
	            font-weight: normal;
	            color: #23b7e5;
	            border-bottom: 1px solid #23b7e5;
	        }
	    }
        .avator-thumb img{
            max-width: 100%;
        }
        .team{
            width: 100%;
        }
	}
</style>